<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <title><?php echo $this->conf['sitename']; ?> - 商户测试</title>
    <link rel="stylesheet" type="text/css" href="<?=indexassets?>sdk/pay/header.css">
    <link rel="stylesheet" type="text/css" href="<?=indexassets?>sdk/pay/public.css">
    <link rel="stylesheet" type="text/css" href="<?=indexassets?>sdk/pay/min-paydemo.css">

</head>

<body style="background-color: #FFFFFF;" class="theme-colorful">
    <div class="page">
        <div class="header-container">
            <div class="header-title-box">
                <a class="header-logo" href="/">
                    <img src="<?php echo '/assets/img/logo.png' ?>" width="150px" alt="">
                </a>
            </div>
            <div class="links-drawer-box ">
                <div class="drawer-line-top"></div>
                <div class="drawer-line-bottom"></div>
            </div>
        </div>

        <div class="header-drawer-container">
            <a class="drawerLink-box" target="_bank" href="/">
                <p>首页</p>
            </a>
            <div class="line-xipiden"></div>
            <a class="drawerLink-box" target="_bank" href="/index/Doc">
                <p>开发文档</p>
            </a>
            <div class="line-xipiden"></div>
            <a class="drawerLink-box login" href="/user/login">
                <p>登录</p>
            </a>
            <div class="line-xipiden"></div>
            <a class="drawerLink-box login" href="/user/reg">
                <p>注册</p>
            </a>
        </div>
        <div class="container">
            <div class="input-box">
                <div class="logo-box"></div>
                <div class="amount-input">
                    <input type="hidden" id="ddh" value="<?php echo "Pay".date("YmdHis") . mt_rand(100, 999); ?>" />
                    <input class="input" type="number" id="money" value="0.1" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" onblur="b=this.value;b=(b+'').replace(/^0+\./g,'0.');b.match(/^0+[1-9]+/)?b=b.replace(/^0+/g,''):b;this.value=Number(b)?b:0;">
                </div>
                <p class="tips-text">可在输入框内输入自定义金额</p>
            </div>
            <div class="dex-box">
                <div class="dex-text">
                    <p style="margin-bottom: 15px; font-size: 20px; font-weight: 900">
                        支付体验
                    </p>
                    <p>自定义金额体验支持微信,支付宝,QQ等多种付款方式</p>
                </div>
                <div class="pay-button">
                    <p id="buttonText">立即支付</p>
                </div>
            </div>
            </div>
        <div class="mask"></div>
        <div class="pay-window">

            <div class="pay-box">

                <div class="wxpay paytest">
                    <div class="pay-item-box" onclick="submitPay('alipay')">
                        <div class="icon">
                            <img src="/assets/icon/alipay.ico">
                        </div>
                        <p>支付宝</p>
                    </div>
                </div>
                <div class="hr"></div>

                <div class="wxpay paytest">
                    <div class="pay-item-box" onclick="submitPay('qqpay')">
                        <div class="icon">
                            <img src="/assets/icon/qqpay.ico">
                        </div>
                        <p>QQ支付</p>
                    </div>
                </div>
                <div class="hr"></div>

                <div class="wxpay paytest">
                    <div class="pay-item-box" onclick="submitPay('wxpay')">
                        <div class="icon">
                            <img src="/assets/icon/wxpay.ico">
                        </div>
                        <p>微信支付</p>

                    </div>
                </div>
                <div class="hr"></div>
                <div class="usdt paytest">
                    <div class="pay-item-box" onclick="submitPay('usdt')">
                        <div class="icon">
                            <img src="/assets/icon/usdt.ico">
                        </div>
                        <p>USDT-TRC20</p>

                    </div>
                    

                </div>
                <div class="hr"></div>
                <div class="cancel">取消</div>
            </div>
        </div>
        <div class="none-show">
            <img src="https://www.jeequan.com/jee/images/payType/pc-tips.svg" alt="pc-tips">
            <p>该页面为H5支付体验，请在移动端打开</p>
        </div>
        <script src="<?=adminassets?>assets/pear/component/layui/layui.js"></script>
         <script>
            layui.cache.page = '';
            layui.use(['jquery', 'form'], function() {
                var $ = layui.jquery;

                const userAgent = navigator.userAgent;
                $(".links-drawer-box").click(function() {
                    if (!$(this).children(".drawer-line-top").hasClass('open-top')) {
                        $(this).children(".drawer-line-top").addClass("open-top");
                        $(this).children(".drawer-line-bottom").addClass("open-bottom")
                        $(".header-drawer-container").addClass("container-open")
                        $('body').css({
                            "height": "100vh",
                            "overflow": "hidden"
                        })
                    } else {
                        $(this).children(".drawer-line-top").removeClass("open-top");
                        $(this).children(".drawer-line-bottom").removeClass("open-bottom")
                        $(".header-drawer-container").removeClass("container-open")
                        $('body').css({
                            "height": "auto",
                            "overflow": "initial"
                        })
                    }
                });
                $(".header-drawer").hover(function() {
                    var son = $(this).children(".drawer-off"),
                        linksHeight = $(this).find(".header-resources-drawer-box").height();
                    son.stop().animate({
                        height: linksHeight + 10 + "px",
                        paddingTop: "10px",
                        top: "80px",
                    }, 250);
                }, function() {
                    var son = $(this).children(".drawer-off");
                    son.stop().animate({
                        height: "0",
                        padding: "0",
                        top: "108px",
                    }, 150);
                });
                var pagePath = window.location.pathname,
                    pathCenter = pagePath.slice(11, -5),
                    document = "document",
                    blog = "blog",
                    community = "community";

                if (pathCenter == document) {
                    $(".document-title").css({
                        display: "block",
                    });
                } else if (pathCenter == blog) {
                    $(".blog-title").css({
                        display: "block",
                    });
                } else if (pathCenter == community) {
                    $(".community-title").css({
                        display: "block",
                    });
                };
                var inputValue = $(".input").val(); //初始value
                function inputFun() {
                    $("#buttonText").html("立即支付");
                }
                inputFun(); //初始调用
                $(".input").bind("input propertychange", function() {
                    //输入实时触发
                    inputValue = $(".input").val(); //重置value
                    var _this = $(this);
                    var inputLength = _this.val().length;
                    var inputWidht = parseInt(inputLength) * 11.5 + 25;
                    var companyWidth = $(".company").outerWidth();
                    _this.css("width", inputWidht + "px"); //输入框宽度随内容变化
                    $(".amount-input").css("width", inputWidht + companyWidth + 20 + "px"); //容器宽度实时变化
                    inputFun(); //调用按钮文字同步方法
                });
                $("input").blur(function() {
                    //失焦时删除多输入的0，然后同步到按钮上
                    inputValue = $(".input").val();
                    inputFun();
                });
                $(".pay-button").on("click", function() {
                    $(".mask").css({
                        visibility: "visible",
                        opacity: 1,
                    });
                    $(".pay-window").css({
                        bottom: "10px",
                    });
                });
                $(".cancel").on("click", function() {
                    $(".mask").css({
                        visibility: "hidden",
                        opacity: 0,
                    });
                    $(".pay-window").css({
                        bottom: "-220px",
                    });
                });
                $(".mask").on("click", function() {
                    $(".mask").css({
                        visibility: "hidden",
                        opacity: 0,
                    });
                    $(".pay-window").css({
                        bottom: "-220px",
                    });
                });

                // 生成订单号
                window.submitPay = function(obj) {
                    var money = $("#money").val();
                    var ddh = $("#ddh").val();
                    var name = $("#name").val();
                    var type = obj;
                    if (money == '') {
                        notice.msg("金额不能为空", {
                            icon: 2
                        });
                        return false;
                    }
                    window.location.href = `/pay/pay_cs/${ddh}?money=${money}&type=${type}`;
                    return false;
                }

            })
        </script>